<template lang="pug">
    div
        h1 用户列表
        Form(ref="form", :model="select", inline)
            FormItem(prop="nickname")
                Input(v-model="select.nickname", style="width: 300px", placeholder="输入昵称（支持模糊查询）")
            FormItem(prop="phone")
                Input(v-model="select.phone", style="width: 300px", placeholder="输入手机号（支持模糊查询）")
            FormItem
                Button(@click="index") 查找
                Button(@click="$refs.form.resetFields(), index()", style="margin-left: 20px") 清空
        el-table(:data="data.data")
            el-table-column(label="头像")
                template(slot-scope="scope")
                    img(:src="scope.row.avatar_url")
            el-table-column(prop="nickname",       label="昵称")
            el-table-column(label="具体内容")
                template(slot-scope="scope")
                    Tooltip(placement="right-end", :transfer="true")
                        div(slot="content")
                            p 电话：{{scope.row.phone}}
                            p 性别：{{scope.row.sex === 1 ? '男' : '女'}}
                            p 身高：{{scope.row.height}}
                            p 体重：{{scope.row.weight}}
                            p 生日：{{scope.row.birthday | date}}
                            p 胸围：{{scope.row.bust}}
                            p 腰围：{{scope.row.waist}}
                            p 臀部：{{scope.row.hips}}
                            p 鞋码：{{scope.row.show_size}}
                            p 描述：{{scope.row.description}}
                        Button 点这里
            el-table-column(label="状态")
                template(slot-scope="scope") {{['正常', '冻结'][scope.row.freeze]}}
            el-table-column(prop="point",               label="萝卜币")
            el-table-column(prop="notice_count",        label="通告次数")
            el-table-column(prop="report_count",        label="举报次数")
            el-table-column(prop="exposure_count",      label="失信次数")
            el-table-column(label="最后一次登录的时间")
                template(slot-scope="scope") {{scope.row.last_login_time | time}}
            el-table-column(label="用户创建时间")
                template(slot-scope="scope") {{scope.row.create_time | time}}
            el-table-column(label="操作", width="150")
                template(slot-scope="scope")
                    Button.button(v-if="scope.row.freeze",  type="warning",     @click="update(scope.row.user_id)") 解封该用户
                    Button.button(v-else,                   type="error",       @click="update(scope.row.user_id)") 封禁该用户

        Page(:total="data.total_count", @on-change="index")

</template>

<script>
    export default {
        data() {
            return {
                page: 1,
                data: {
                    data: [],
                    total_count: 0,
                },
                select: {
                    nickname: '',
                    phone: '',
                },
            }
        },

        methods: {
            async index(page = 1) {
                this.data = await this.$http.post('tools_user/getUserList', {page_index: page - 1, page_size: 20, ...this.select});
                this.page = page;
            },

            async update(to_user_id) {
                try {
                    await this.$confirm(`确认修改该用户的状态？`, '用户处理确认');
                    await this.$http.post('tools_user/setUserFreeze', {to_user_id});
                    this.index();
                } catch (e) {}
            }
        },

        created() {
            this.index();
        }
    }
</script>
